import React from 'react'
import {post} from '../../../../my_axios/api'
import {Form, Input,Select, Row, Col,message} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
class UserForm extends React.Component {
    state = {
        confirmDirty: false,
        emailRule:{
            validateStatus:'',
            help:''
        }
    };

    handleSubmit = () => {
        var vm=this;
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                //调用父组件的回调函数
                vm.props.modalCallback(values);
            }
        });
    };
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({confirmDirty: this.state.confirmDirty || !!value});
    };

    validateToNextPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
            form.validateFields(['confirm'], {force: true});
        }
        callback();
    };
    //清空数据
    resetFields(){
        this.props.form.resetFields()
    }
    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 6},
                sm: {span: 6},
                md: {span: 6},

            },
            wrapperCol: {
                xs: {span: 18},
                sm: {span: 18},
                md: {span: 18},
            },
        };
        return (
            <Form onSubmit={this.handleSubmit}>
                <Row>
                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
                        <FormItem
                            {...formItemLayout}
                            label={(
                                <span>姓名&nbsp;</span>
                            )}>
                            {getFieldDecorator('name', {
                                rules: [{required: true, message: '请输入姓名', whitespace: true}],
                                initialValue:this.props.userObject.name
                            })(
                                <Input disabled={this.props.formType==='查看'?true:false}/>
                            )}
                        </FormItem>
                    </Col>
                    {this.props.formType==='新增'||this.props.formType==='查看'?
                        <Col xs={24} sm={24} md={24} lg={24} xl={24}>
                            <FormItem
                                {...formItemLayout}
                                label={(
                                    <span>用户名&nbsp;</span>
                                )}>
                                {getFieldDecorator('user_name', {
                                    rules: [{required: true, message: '请输入用户名', whitespace: true}],
                                    initialValue:this.props.userObject.user_name
                                })(
                                    <Input disabled={this.props.formType==='查看'?true:false}/>
                                )}
                            </FormItem>
                        </Col>:null
                    }
                    {this.props.formType==='查看'?
                        <Col  xs={24} sm={24} md={24} lg={24} xl={24}>
                            <FormItem
                                {...formItemLayout}
                                label={(
                                    <span>角色&nbsp;</span>
                                )}>
                                {getFieldDecorator('rolesString', {
                                    initialValue:this.props.userObject.rolesString
                                })(
                                    <Input disabled={true}/>
                                )}
                            </FormItem>
                        </Col>:null
                    }

                    {this.props.formType==='新增'?
                        <div>
                        <Col  xs={24} sm={24} md={24} lg={24} xl={24}>
                            <FormItem
                                {...formItemLayout}
                                label="密码">
                                {getFieldDecorator('password', {
                                    rules: [{
                                        required: true, message: '请输入密码',
                                    }, {
                                        validator: this.validateToNextPassword,
                                    }],
                                    initialValue:this.props.userObject.password
                                })(
                                    <Input type="password" />
                                )}
                            </FormItem>
                        </Col>
                    </div>:null
                    }


                </Row>
            </Form>
        );
    }
}

let myUserForm = Form.create()(UserForm)

export default myUserForm